<script setup lang="ts">
import {
  PersistentVolumeClaim,
  useK8SApi
} from "@/views/domain/kubeHud/api/k8s";
import { onMounted, ref } from "vue";

const { pvcRepo } = useK8SApi();
type Prop = {
  namespace: string;
};

const props = defineProps<Prop>();
const model = defineModel<string>();

const pvcList = ref<PersistentVolumeClaim[]>([]);
const emits = defineEmits(["change"]);
const onChange = (name: string) => {
  const pvcModelIdx = pvcList.value.findIndex(
    pvc => pvc.metadata.name === name
  );

  emits(
    "change",
    name,
    pvcModelIdx >= 0 ? pvcList.value[pvcModelIdx] : undefined
  );
};

const reloadPvcList = () => {
  pvcRepo.getPVC({ namespace: props.namespace }).then(res => {
    if (res && res.items) {
      pvcList.value = res.items;
    }
  });
};

onMounted(() => {
  reloadPvcList();
});
</script>

<template>
  <el-select v-model="model" placeholder="请选择PVC" @change="onChange">
    <el-option
      v-for="item in pvcList"
      :key="item.metadata.name"
      :label="item.metadata.name"
      :value="item.metadata.name"
    />
  </el-select>
</template>
<style lang="scss" scoped></style>
